<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: #ff3040;
        }

        #mark {
            width: 500px;
            height: 600px;
            background-color: #000;
        }
    </style>
</head>
<body>
<div id="mark">
    <div id="box"></div>
</div>
<script>
    var box = document.getElementById("box");
    var mark = document.getElementById("mark");
    var arr = [box, mark, document.body, document.documentElement, document]
    for (var i = 0; i < arr.length; i++) {
        arr[i].addEventListener("click", function (e) {
            console.log(this);
            //console.log(e.eventPhase); 1捕获  2目标 3冒泡
        }, true)
    }
    //console.log(document.documentElement);//html
</script>
</body>
</html>